<template>
    <div>
        <span>我是关于页面</span>
        <button @click="router.go(-1)">返回首页</button>
        <scEcharts :option="option" height="400px" width="400px"></scEcharts>
        <!-- 测试渲染函数 -->
        <vnode></vnode>
    </div>

    <img v-lazy="'/img/绿巨人.png'">

    <div style="height: 3000px;background-color: antiquewhite;"></div>

    <img v-lazy="'/img/牛头.png'">

    <div class="directive" v-mydirective="color" v-color="color1">{{btn}}</div>

    <el-input v-model="color" placeholder="请输入颜色"></el-input>
    <el-input v-model="color1" placeholder="请输入颜色1"></el-input>
    <el-button type="primary" @click="clickBtn">clickBtn</el-button>
    <el-button type="primary" @click="clickBtn1">clickBtn1</el-button>
</template>

<script setup>
import {  h, ref } from 'vue'
import { useRouter } from 'vue-router'
import scEcharts from '../components/scEcharts/index.vue'

const vMydirective = {
    mounted(el, binding) {
        el.style.backgroundColor = binding.value;
    },
    updated(el, binding) {
        // 组件更新时会调用updated
        console.log('updated', binding.value);
        el.style.backgroundColor = binding.value;
    }
}
const vColor = {
    updated(el, binding) {
        console.log('updated_color', binding.value);
    }
}

const color = ref('red')
const color1 = ref('red1')

const clickBtn = () => {
    const el = document.querySelector('.directive')
    el.innerHTML = 'good'
}

const btn = ref('good_btn')
const clickBtn1 = () => {
    btn.value = 'new btn'
}

const router = useRouter()
const option = {
    title: {
        text: 'ECharts 入门示例'
    },
    tooltip: {},
    legend: {
        data: ['销量']
    },
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [
        {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }
    ]
}
const vnode = h('div', {
    id: 'test',
    class: 'test',
    // innerHTML: 'hello', //innerHTML会替换子元素的内容
    style: { color: 'red' },
    onClick: () => {
        console.log('test');
    },
}, [h('span', '123'), h('span', 'hello')])
</script>

<style lang="scss" scoped>
</style>